<template>
  <div class="container">
    <el-scrollbar class="srollbar">
      <ul class="infinite-list" v-infinite-scroll="load" style="overflow:auto">
        <li v-for="(item ,index) in content.list" :key="index" class="infinite-list-item">
          <el-image :src="item.idxImg" lazy></el-image>
        </li>
      </ul>
    </el-scrollbar>
    <el-row type="flex" justify="center" style="padding:20px;">
      <el-button-group>
        <el-button plain size="small" icon="el-icon-arrow-left" @click="up">上一章</el-button>
        <el-button plain size="small">
          下一章
          <i class="el-icon-arrow-right el-icon--right" @click="down"></i>
        </el-button>
      </el-button-group>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 1
    };
  },
  async asyncData({ $axios, params, error }) {
    let workId = params.id;
    let chapterId = params.chapter;
    let { status, data } = await $axios.get(
      "/api/content?workId=" +
        workId +
        "&chapterId=" +
        chapterId +
        "&page=1&size=1"
    );
    if(data.total==0){
       error({ statusCode: 404, message: '页面未找到' })
    }
    return {
      content: data
    };
  },
  methods: {
    up() {
      let workId = this.$route.params.id;
      let chapterId = this.$route.params.chapter;
      if (chapterId > 1) {
        chapterId--;
        this.$router.push("/work/" + workId + "/chapter/" + chapterId);
      } else {
        this.$notify.warning({
          title: "注意",
          message: "已经是第一章"
        });
      }
    },
    down() {
      let workId = this.$route.params.id;
      let chapterId = this.$route.params.chapter;

      chapterId++;
      this.$router.push("/work/" + workId + "/chapter/" + chapterId);
    },
    async load() {
      let page = this.content;

      if (page.hasNextPage) {
        let workId = this.$route.params.id;
        let chapterId = this.$route.params.chapter;
        let url =
          "/api/content?workId=" +
          workId +
          "&chapterId=" +
          chapterId +
          "&size=1&page=" +
          page.nextPage;

        let { status, data } = await this.$axios.get(url);

        this.content.list.push(data.list[0]);

        this.content.hasNextPage = data.hasNextPage;
        this.content.nextPage = data.nextPage;
      } else {
        this.$notify.warning({
          title: "到底了！",
          message: "该章节已结束"
        });
      }
    }
  }
};
</script>

 
<style scoped>
html,
body {
  height: 100%;
  overflow: hidden !important;
}
.page-component__scroll {
  height: 100%;
}
.page-component__scroll {
  height: 100%;
}
.page-component__scroll .el-scrollbar__wrap {
  overflow-x: auto;
  overflow-y: scroll;
}
.srollbar {
  height: 1200px;
}
.infinite-list {
  list-style: none;
}
.infinite-list {
  height: 1200px;
}
</style>